<script setup>
import {ref, computed, reactive, onMounted} from 'vue'
import { useRoleStore } from "@/stores/roleStore.js";
import {ElMessage} from "element-plus";

const props = defineProps({
    roleId: {
    dataScope: String,
    required: true
  }
})

const roleStore = useRoleStore()
const dialogVisible = ref(false)

const handleClose = () => {
  dialogVisible.value = false
}
// 时间格式化方法
const formatTime = (time) => {
  if (!time) return ''
  return new Date(time).toLocaleString()
}

// 获取权限详情
const fetchRoleDetail = async (roleId) => {
  try {
    await roleStore.getRoleDetail(roleId)
    console.log('角色详情:', roleStore.roleDetail)
  } catch (error) {
    console.error('获取角色详情失败:', error)
    ElMessage.error('获取角色详情失败')
  }
}

// 在挂载完成之后，根据父组件传过来的Id调用接口获取权限数据
onMounted(() => {
  if (props.roleId) {
    fetchRoleDetail(props.roleId)
  }
})

// 暴露方法，父组件可以调用
defineExpose({
  openDialog: () => {
    dialogVisible.value = true
    if (props.roleId) {
      fetchRoleDetail(props.roleId)
    }
  }
})
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="角色详情"
      wroleIdth="50%"
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="权限ID">{{ roleStore.roleDetail.roleId }}</el-descriptions-item>
      <el-descriptions-item label="权限名称">{{ roleStore.roleDetail.name }}</el-descriptions-item>
      <el-descriptions-item label="权限编码">{{ roleStore.roleDetail.code }}</el-descriptions-item>
      <el-descriptions-item label="权限类型">
        <el-tag :dataScope="roleStore.roleDetail.dataScope === 1 ? 'danger' : roleStore.roleDetail.dataScope === 2 ? 'primary' : 'success'">
          {{ roleStore.roleDetail.dataScope === 1 ? '全部' : roleStore.roleDetail.dataScope === 2 ? '本部' : '自定义' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ formatTime(roleStore.roleDetail.createTime) }}</el-descriptions-item>
      <el-descriptions-item label="角色权限表">{{ roleStore.roleDetail.aclList }}</el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>